<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;发布视频</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        
        <div class="container">
	            <el-form ref="form" label-width="150px">
	                 <el-form-item label="视频分类：">
	                	<el-select v-model="type" placeholder="视频分类" >
				    <el-option
				      v-for="item in optionstype"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				 </el-form-item> 
                 <el-form-item label="视频封面图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="headImg!=''">
                            <div  class="sola-flex" >
                                <img  :src="headImg" />
                                <span class="delete" @click="delPicture()"><i class="el-alert__icon el-icon-error"></i></span>
                            </div>
                        </div>
                        <div class="sola-file-box">
                            <el-button type="primary" plain>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                            <input class="btn-file" type="file" @change="uploadBanner" v-loading.fullscreen.lock="fullscreenLoading"/>
                            <span style="color:red;padding-left:10px;">建议上传的封面图比例是75：37 示例：750*370 </span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="视频标题：">
                    <el-input v-model="title" placeholder="请输入视频标题" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="视频链接：">
                    <el-input v-model="videoUrl" placeholder="请输入视频链接" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="视频时长（分钟）：">
                    <el-input v-model="videoTime"  type="Number" min="1" @keyup.native="proving1" placeholder="请输入视频时长 (单位：分钟)" style="width:400px"></el-input>  分钟 （示例：正整数2 无需带单位）
                </el-form-item>
                <el-form-item label="是否设置推荐：">
                    <el-radio v-model="isRecommend" label="0" border>否</el-radio>
                    <el-radio v-model="isRecommend" label="1" border>是</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">确认发布</el-button>
                </el-form-item>
            </el-form>
            <div style="width:800px;height:auto;">
                <p style="font-size:18px;color:red">视频链接说明</p>
                <p style="padding:10px 0px">第一步：登录七牛云平台输入账号密码进行登录 <a href="https://sso.qiniu.com/" target="_blank">https://sso.qiniu.com/</a></p>
                <p><img src="http://appimg.yinsoso.com//shipinshuoming.jpg" style="width:100%;height:auto"/></p>
            </div>
        </div>
          <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {postUploadBase64,getQiniuUptoken} from '@/api/public';
import {videoAdd} from '@/api/video';
export default {
    name:"videoAdd",
    data() {
        return {
            accept: 'image/gif, image/jpeg, image/png, image/jpg', //图片上传类型
            typeId:'', //当前要删除图片的类型   1封面图 2详情图  3关键词
            idx:0,//当前记录的下标
            delVisible:false,
            fullscreenLoading:false,
            delVisible:false,
            headImg:'',  //封面图
            optionstype: [{
			          value: '1',
			          label: '展会'
			        }, {
			          value: '2',
			          label: '企业'
			        }, {
			          value: '3',
			          label: '其他'
			        }],
	        type: '',//性别
	        title:'',//标题
	        videoUrl:'',//视频地址	
            videoTime:'',//视频时长
            isRecommend:"0",//是否推荐视频：0否、1是
        }
    },
    components: {
        
    },
    //实例创建
    created(){
        // editor.create()
    },
    //计算属性
    computed:{

    },
    //方法
    methods: {
        //验证只能输入正整数
        proving1(){
            this.videoTime=this.videoTime.replace(/[^\.\d]/g,'');
            this.videoTime=this.videoTime.replace('.','');
        },
        //确定删除图片
        deleteRow(){
                this.headImg="";

            if(this.typeId==1){
                //封面图
                this.headImg="";
            }else if(this.typeId==2){
                
            }else if(this.typeId==3){
                //删除关键词信息
                this.skuProp.splice(this.idx,1);
            }
            
            this.$message.success('删除成功');
            this.delVisible = false;
        },
          //删除封面提图片
        delPicture(){
            //当前记录的下标
            this.delVisible = true;
        },
        //触发封面图 file
        uploadBanner(event){
            // debugger;
            var _event = event;
            var _this = this;
            let reader =new FileReader();
            let img1=event.target.files[0];
            let type=img1.type;//文件的类型，判断是否是图片
            let size=img1.size;//文件的大小，判断图片的大小
            const files = event.target;
            if(this.accept.indexOf(type) == -1){
                this.$message({
                    message: '请选择gif,jpeg,png,jpg格式图片上传',
                    type: 'warning'
                });
                return false;
            }
            else if(size>3145728){
                this.$message({
                    message: '请选择3M以内的图片上传',
                    type: 'warning'
                });
                return false;
            }else if (typeof(FileReader) === 'undefined') {
                this.$notify.error({
                    title: '错误',
                    message: '抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！'
                });

            }else {
                this.fullscreenLoading = true;
                let reader = new FileReader();
                reader.readAsDataURL(img1);
                reader.onload = function(e) {
                    var base = this.result;
                    // console.log(base);

                    postUploadBase64(base).then(response=>{
                        // console.log(response);
                        if(response.code==200){
                            _this.$message({
                                message: '恭喜你，图片上传成功',
                                type: 'success'
                            });
                            _this.headImg=response.data;

                        }else{
                            _this.$notify.error({
                                title: '上传图片失败',
                                duration:2000,
                                message: '失败原因：'+response.msg
                            });
                        }
                        _this.fullscreenLoading = false;
                    })

                }

            }
        },
        //确认发布
        submit(){
        // console.log(this.$refs.vueWangeditor.getText().length);
            if(this.type==""){
                this.$notify.info({title: '提示',message: '请选择视频分类'});
                return false;
            }else if(this.headImg==""){
                this.$notify.info({title: '提示',message: '请上传视频封面'});
                return false;
            }else if(this.title==""){
                this.$notify.info({title: '提示',message: '请输入视频标题'});
                return false;
            }else if(this.videoUrl==""){
                this.$notify.info({title: '提示',message: '请输入视频地址'});
                return false;
            }else if(this.videoTime==""){
                this.$notify.info({title: '提示',message: '请输入视频时长'});
                return false;
            }
            else{
                let param ={}
                param.title=this.title;
                param.videoUrl=this.videoUrl;
                param.videoTime=this.videoTime;
                param.headImg = this.headImg;
                param.type=this.type;
                param.isRecommend = this.isRecommend;
                // console.log(param)
                //调用提交方法
                this.saveGoods(param);
            }
        },
        //提交信息上传
        saveGoods(param){
            var _this =this;
            videoAdd(param).then(response=>{
                // console.log(response);
                if(response.code==200){
                    this.$message({
                        message: '恭喜你，发布成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                         _this.$router.push('/video');
                    },1500);

                }else{
                    this.$notify.error({
                        title: '发布失败',
                        duration:2000,
                        message: '失败原因：'+response.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        },
        editorLoad(originalName, resultText) {
            // resultText 服务器端返回的text
            // originalName 上传文件名
            this.$refs.vueWangeditor.insertImg(resultText)
        },
        editorChange(a) {
//                console.log(a)
        },
    }
}
</script>
<style>
    .news-editor .wangEditor-container .wangEditor-txt{
        height: 300px !important;
    }
</style>
<style lang="stylus" scoped>
    .el-form-item .el-cascader{
        width :400px;
    }
    .el-cascader-menus .el-cascader-menu{
        width :240px
    }
    .sola-upload{
        .sola-left{
            width :100%;
            height :auto;
            .sola-flex{
                float:left
                width: 375px;
                height: 185px;
                margin-bottom 20px;
                margin-right:15px;
                position:relative;
                .delete{
                    position:absolute;
                    top:2px;
                    right:13px;
                    color: #f56c6c;
                    display:inline-block;
                    padding:5px 5px;
                    .el-alert__icon{font-size:28px;cursor:pointer}
                }
                img {
                    width:100%;
                    height:100%;
                }
            }
        }
        .sola-file-box{
            position:relative;
            .btn-file{
                position:absolute;
                top:0;
                left:0;
                z-index 1;
                opacity:0;
                width :120px;
                height :40px;
                outline: 0;
                background-color :none;
                cursor:pointer;
            }
        }

    }
</style>


